<template>
  <div class="system-view">
    <div class="page-header">
      <h1>系统监控</h1>
      <p>实时监控系统资源使用情况</p>
    </div>
    
    <div class="system-cards">
      <!-- CPU 信息卡片 -->
      <div class="card-col">
        <el-card class="system-card cpu-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="card-icon"><Cpu /></el-icon>
              <span class="card-title">CPU 信息</span>
            </div>
          </template>
          <div class="card-content">
            <div v-if="system.cpu" class="info-grid">
              <div class="info-item">
                <span class="info-label">型号:</span>
                <span class="info-value">{{ system.cpu.model || 'N/A' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">使用率:</span>
                <span class="info-value cpu-usage">{{ system.cpu.usedPercent || 0 }}%</span>
              </div>
              <div class="info-item">
                <span class="info-label">核心数:</span>
                <span class="info-value">{{ system.cpu.coreCount || 0 }}</span>
              </div>
            </div>
            <div v-else class="loading-placeholder">
              <el-skeleton :rows="3" animated />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 内存信息卡片 -->
      <div class="card-col">
        <el-card class="system-card memory-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="card-icon"><DataLine /></el-icon>
              <span class="card-title">内存信息</span>
            </div>
          </template>
          <div class="card-content">
            <div v-if="system.memory" class="info-grid">
              <div class="info-item">
                <span class="info-label">总内存:</span>
                <span class="info-value">{{ system.memory.total || 'N/A' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">已用内存:</span>
                <span class="info-value">{{ system.memory.used || 'N/A' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">可用内存:</span>
                <span class="info-value">{{ system.memory.available || 'N/A' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">使用率:</span>
                <span class="info-value memory-usage">{{ system.memory.usePercent || 0 }}%</span>
              </div>
            </div>
            <div v-else class="loading-placeholder">
              <el-skeleton :rows="4" animated />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 操作系统信息卡片 -->
      <div class="card-col">
        <el-card class="system-card os-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="card-icon"><Monitor /></el-icon>
              <span class="card-title">操作系统</span>
            </div>
          </template>
          <div class="card-content">
            <div v-if="system.os" class="info-grid">
              <div class="info-item">
                <span class="info-label">系统家族:</span>
                <span class="info-value">{{ system.os.family || 'N/A' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">版本:</span>
                <span class="info-value">{{ system.os.version || 'N/A' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">内核版本:</span>
                <span class="info-value">{{ system.os.kernelVersion || 'N/A' }}</span>
              </div>
            </div>
            <div v-else class="loading-placeholder">
              <el-skeleton :rows="3" animated />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 硬盘信息卡片 -->
      <div class="card-col">
        <el-card class="system-card disk-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="card-icon"><FolderOpened /></el-icon>
              <span class="card-title">硬盘信息</span>
              <span v-if="system.disks && system.disks.length > 0" class="disk-count">
                ({{ system.disks.length }}个)
              </span>
            </div>
          </template>
          <div class="card-content">
            <div v-if="system.disks && system.disks.length > 0" class="disk-list">
              <div v-for="(disk, index) in system.disks" :key="index" class="disk-item">
                <div class="disk-header">
                  <div class="disk-name-section">
                    <span class="disk-name">{{ disk.name || 'Unknown' }}</span>
                    <el-tag 
                      :type="disk.usePercent > 90 ? 'danger' : disk.usePercent > 70 ? 'warning' : 'success'" 
                      size="small"
                    >
                      {{ disk.usePercent || 0 }}%
                    </el-tag>
                  </div>
                  <span class="disk-type">{{ disk.type || 'N/A' }}</span>
                </div>
                <div class="disk-details">
                  <div class="info-item">
                    <span class="info-label">总容量:</span>
                    <span class="info-value">{{ disk.total || 'N/A' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">已用:</span>
                    <span class="info-value">{{ disk.used || 'N/A' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">可用:</span>
                    <span class="info-value">{{ disk.available || 'N/A' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">挂载点:</span>
                    <span class="info-value">{{ disk.mountPoint || 'N/A' }}</span>
                  </div>
                </div>
                <div class="disk-progress">
                  <el-progress 
                    :percentage="disk.usePercent || 0" 
                    :color="getDiskProgressColor(disk.usePercent)"
                    :show-text="false"
                    :stroke-width="6"
                  />
                </div>
              </div>
            </div>
            <div v-else class="loading-placeholder">
              <el-skeleton :rows="3" animated />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 网卡信息卡片 -->
      <div class="card-col">
        <el-card class="system-card network-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="card-icon"><Connection /></el-icon>
              <span class="card-title">网络接口</span>
              <span v-if="system.networks && system.networks.length > 0" class="network-count">
                ({{ system.networks.length }}个)
              </span>
            </div>
          </template>
          <div class="card-content">
            <div v-if="system.networks && system.networks.length > 0" class="network-list">
              <div v-for="(network, index) in system.networks" :key="index" class="network-item">
                <div class="network-header">
                  <div class="network-name-section">
                    <span class="network-name">{{ network.name || 'Unknown' }}</span>
                    <el-tag 
                      v-if="network.virtual" 
                      type="warning" 
                      size="small" 
                      class="virtual-tag"
                    >
                      虚拟网卡
                    </el-tag>
                    <el-tag 
                      v-else 
                      type="info" 
                      size="small" 
                      class="physical-tag"
                    >
                      物理网卡
                    </el-tag>
                  </div>
                  <el-tag :type="network.status === 'up' ? 'success' : 'danger'" size="small">
                    {{ network.status || 'unknown' }}
                  </el-tag>
                </div>
                <div class="network-details">
                  <div class="info-item">
                    <span class="info-label">IP:</span>
                    <span class="info-value">{{ network.ip || 'N/A' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">速率:</span>
                    <span class="info-value">{{ network.speed || 'N/A' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">发送:</span>
                    <span class="info-value">{{ network.upSpeed || 'N/A' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">接收:</span>
                    <span class="info-value">{{ network.downSpeed || 'N/A' }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="loading-placeholder">
              <el-skeleton :rows="3" animated />
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Cpu, Monitor, Connection, DataLine, FolderOpened } from '@element-plus/icons-vue'
import request_lm from "../utils/request_lm.js"

const system = ref({})
const loading = ref(true)

// 获取系统信息
const fetchSystemInfo = async () => {
  try {
    loading.value = true
    const response = await request_lm.get('/system', { params: {} })
    system.value = response.data || {}
    console.log('系统信息:', system.value)
  } catch (error) {
    console.error('获取系统信息失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取磁盘进度条颜色
const getDiskProgressColor = (percentage) => {
  if (percentage >= 90) {
    return '#f56c6c' // 红色 - 危险
  } else if (percentage >= 70) {
    return '#e6a23c' // 橙色 - 警告
  } else {
    return '#67c23a' // 绿色 - 正常
  }
}

onMounted(() => {
  fetchSystemInfo()
})
</script>

<style scoped lang="scss">
.system-view {
  width: 100%;
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden; // 防止横向滚动
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  
  h1 {
    color: #303133;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px 0;
  }
  
  p {
    color: #909399;
    font-size: 14px;
    margin: 0;
  }
}

.system-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.card-col {
  min-height: 200px;
}


.system-card {
  height: 100%;
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #303133;
    
    .card-icon {
      font-size: 18px;
    }
    
    .card-title {
      font-size: 16px;
    }
    
    .network-count {
      font-size: 12px;
      color: #909399;
      font-weight: 400;
      margin-left: 4px;
    }
  }
  
  .card-content {
    padding: 8px 0;
  }
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .info-label {
    color: #606266;
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
  }
  
  .info-value {
    color: #303133;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    flex: 1;
    margin-left: 12px;
  }
}

.cpu-usage {
  color: #e6a23c;
  font-weight: 700;
}

.memory-usage {
  color: #67c23a;
  font-weight: 700;
}

.disk-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 6px;
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
    
    &:hover {
      background: #a8a8a8;
    }
  }
}

.disk-item {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
  
  &:hover {
    background: #f0f2f5;
  }
  
  .disk-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
    
    .disk-name-section {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }
    
    .disk-name {
      font-weight: 600;
      color: #303133;
      font-size: 14px;
      word-break: break-word;
      overflow-wrap: break-word;
      max-width: 200px;
    }
    
    .disk-type {
      font-size: 10px;
      color: #909399;
      background: #f4f4f5;
      padding: 2px 6px;
      border-radius: 3px;
      white-space: nowrap;
    }
  }
  
  .disk-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .info-label {
        font-size: 12px;
        color: #606266;
        font-weight: 500;
        min-width: 60px;
      }
      
      .info-value {
        font-size: 12px;
        color: #303133;
        font-weight: 600;
        text-align: right;
        flex: 1;
        margin-left: 12px;
        word-break: break-word;
        overflow-wrap: break-word;
      }
    }
  }
  
  .disk-progress {
    margin-top: 8px;
  }
}

.network-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px; // 减少最大高度，适应普通卡片
  overflow-y: auto; // 垂直滚动
  padding-right: 6px; // 为滚动条留出空间
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
    
    &:hover {
      background: #a8a8a8;
    }
  }
}

.network-item {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  flex-shrink: 0; // 防止收缩
  transition: background-color 0.2s ease;
  
  &:hover {
    background: #f0f2f5;
  }
  
  .network-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
    
    .network-name-section {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0; // 允许收缩
    }
    
    .network-name {
      font-weight: 600;
      color: #303133;
      font-size: 14px;
      word-break: break-word;
      overflow-wrap: break-word;
      max-width: 200px; // 限制最大宽度
    }
    
    .virtual-tag {
      background-color: #fdf6ec;
      border-color: #f5dab1;
      color: #b88230;
    }
    
    .physical-tag {
      background-color: #f4f4f5;
      border-color: #d3d4d6;
      color: #909399;
    }
  }
  
  .network-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    
    .info-item {
      padding: 2px 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      
      .info-label {
        font-size: 10px;
        color: #909399;
        font-weight: 500;
      }
      
      .info-value {
        font-size: 11px;
        word-break: break-all;
        overflow-wrap: break-word;
        color: #303133;
        font-weight: 600;
      }
    }
  }
}

.loading-placeholder {
  padding: 16px 0;
}

// 响应式设计
@media (max-width: 1200px) {
  .system-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 0 16px;
  }
}

@media (max-width: 768px) {
  .system-view {
    padding: 16px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .system-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }
  
  .network-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    
    .network-name-section {
      width: 100%;
    }
    
    .network-name {
      max-width: 100%;
    }
  }
  
  .network-details .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    
    .info-value {
      text-align: left;
      word-break: break-word;
    }
  }
}

@media (max-width: 480px) {
  .system-view {
    padding: 12px;
  }
  
  .system-cards {
    gap: 12px;
  }
  
  .page-header h1 {
    font-size: 20px;
  }
}

// 卡片主题色
.cpu-card {
  .card-header .card-icon {
    color: #e6a23c;
  }
}

.memory-card {
  .card-header .card-icon {
    color: #67c23a;
  }
}

.os-card {
  .card-header .card-icon {
    color: #409eff;
  }
}

.disk-card {
  .card-header .card-icon {
    color: #67c23a;
  }
}

.network-card {
  .card-header .card-icon {
    color: #f56c6c;
  }
}
</style>